<template>
  <div class="clearfix nav-bar-func">
    <el-icon v-show="hasBack" class="back headIcon left" @click="back" color="#3c3c32">
      <arrow-left/>
    </el-icon>
    <el-icon class="headIcon right" @click="edit" v-show="hasEdit" :size="30">
      <edit/>
    </el-icon>
    <span v-show="hasTitle" class="title">{{title}}</span>
    <!-- 分割线 -->
    <el-divider/>
  </div>
</template>

<script lang="ts">
import {ArrowLeft, Edit} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

export default {
  name: "NavBarFunc",
  props: {
    hasEdit: {
      type: Boolean,
      default: false
    },
    hasTitle: {
      type: Boolean,
      default: true
    },
    hasBack: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ""
    }
  },
  components: {
    ArrowLeft,
    Edit
  },
  setup(props: any, ctx: any) {
    const router = useRouter()

    const back = () => {
      router.go(-1)
    }

    const edit = () => {
      ctx.emit("edit")
    }

    return {
      back,
      edit
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar-func {
  text-align: center;

  .headIcon {
    font-size: 30px;
    font-weight: bolder;
    margin: 10px;

    .icon {
      display: inline-block;
    }
  }

  .title {
    font-size: 25px;
    font-weight: bolder;
    line-height: 50px;
    text-align: center;
    margin: 10px;
    vertical-align: center;
    color: #3c3c32;
  }

  .el-divider {
    margin: 0;
  }
}
</style>